<template>
  <div class="full">
    <div class="head">
      <span style="margin-left:0px;">标签类别名称</span>
      <el-input v-model="state.pm.tagCategoryName" clearable placeholder="请输入" style="width:200px;"></el-input>
      <span>设备状态</span>
      <el-select v-model="state.pm.tagCategoryState" clearable placeholder="请选择">
        <el-option label="停用" :value="1" />
        <el-option label="启用" :value="0" />
      </el-select>
      <el-button class="cusb2" style="width:80px;margin-left:20px;" @click="getData">查询</el-button>
      <el-button class="cusb2" style="width:120px;margin-left:auto;" @click="tonew">新增标签类别</el-button>
    </div>
    <div class="tab">
      <el-table :data="state.data" height="600" stripe style="width: 100%">
        <el-table-column type="index" width="80" align="center" />
        <el-table-column prop="tagCategoryName" label="标签类别名称" width="400" />
        <el-table-column prop="tagCategoryState" label="标签状态" width="200" align="center" />
        <el-table-column prop="describe" label="描述" min-width="200" />
        <el-table-column label="操作" width="100" align="center">
          <template #default="scope">
            <el-button link @click="toedit(scope.row)">编辑</el-button>
            <el-button link @click="todel(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus';
const state = reactive({
  pm: { tagCategoryName: '', tagCategoryState: null },
  data: [],
  total: 15
})
const emit = defineEmits(["new"]);
const getData = () => {
  useApi.post("/arhome/system/tagcategory/list", state.pm).then((res) => {
    state.data = res.data.tagCategory4SysList
  });
}
const tonew = () => {
  let store = useMyStore()
  store.params.e2 = {}
  emit('new')
}
const toedit = (item) => {
  let store = useMyStore()
  store.params.e2 = item
  emit('new')
}
const todel = (item) => {
  let pm = {
    optType: 'D',
    tagCategoryId: item.tagCategoryId
  }
  ElMessageBox.confirm(
    '确认删除当前记录？',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      useApi.post("/arhome/system/tagcategory/handle", pm).then((res) => {
        getData()
      })
    })
}
onMounted(() => {
  getData()
})
</script>

<style lang="scss" scoped>
.head {
  margin-top: -4px;
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;

  span {
    font-weight: 600;
    font-size: 14px;
    color: #FFFFFF;
    margin: 0 8px 0 30px;
  }
}

.tab {
  width: 100%;
  height: 610px;
}

:deep(.el-select) {
  width: 200px;
  --el-input-text-color: #ffffffc0;

  .el-select__wrapper {
    background: #003D6399;
    color: #FFFFFF;
    border: none;
    box-shadow: none;
    border-radius: 0px !important;
  }
}

:deep(.el-input) {
  --el-input-text-color: #ffffff;
  --el-input-bg-color: #003D6399;
}

:deep(.el-table) {
  --el-table-header-bg-color: #003D6399;
  --el-table-header-text-color: #ffffffc0;
  --el-table-bg-color: #00000012;
  --el-table-border-color: #00000010;
  --el-table-text-color: #ffffffc0;
  --el-table-tr-bg-color: #20628fcc;
  --el-table-row-hover-bg-color: #00000033;
}

:deep(.el-table__row--striped td) {
  background-color: #134f7dcc !important;
}

:deep(.el-pagination) {
  --el-pagination-button-bg-color: #003D6399;
  --el-pagination-button-color: #ffffffc0;
  --el-text-color-regular: #ffffffc0;
  --el-disabled-bg-color: #003D636E;
}

:deep(.el-button) {
  color: #ffffff;
}
</style>